<template>
  <div>
    {{ count }} ---{{countObj.count}}
    <button @click="handleChange">点击改变</button>
    <ul>
      <li v-for="todo in todoList" :key="todo.id" :class="{done: todo.isDone}" @click="toggleStatus(todo.id)">{{todo.title}}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, Ref } from 'vue'

// ref一般用来把普通的数据类型转换为响应式数据
const count = ref<string>('hello world')
const handleChange = () => {
  count.value = 'hello itcast'
  countObj.value = { count: 9999 }
}

interface Count {
  count: number
}
const countObj:Ref<Count> = ref({ count: 1 })

interface Todo {
  id: number,
  isDone: boolean,
  title: string
}
const todoList = ref<Todo[]>([{ id: 1, isDone: false, title: '敲代码' }])
const toggleStatus = (id: number) => {
  const index = todoList.value.findIndex(item => item.id === id)
  if (index < 0) {
    return false
  } else {
    todoList.value[index].isDone = !todoList.value[index].isDone
  }
}

</script>

<style scoped>
.done {
  text-decoration: line-through;
}
</style>
